<template>
  <div>
    <el-dialog
      :visible="visible"
      :title="title"
      :width="width"
      append-to-body
      @close="close"
      @closed="closed"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        :disabled="operation === 0"
        label-width="150px"
        label-position="right"
        label-suffix=":"
      >
        <el-row v-if="operation !== 1" :gutter="10">
          <el-col :span="24">
            <el-form-item :label="$t('locationLang.locationCode')">
              <div style="margin-left: 5px">
                {{
                  $t(
                    getTitleByValue(depotStatusOptionList, form.locationStatus)
                  )
                }}
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item
              :label="$t('depotLang.depot')"
              :prop="operation === 1 ? 'depotId' : ''"
            >
              <el-select
                v-if="operation === 1"
                v-model="form.depotId"
                :placeholder="$t('pleaseSelect')"
                clearable
                style="width: 400px"
                @change="depotChange"
              >
                <el-option
                  v-for="item in depotOptionList"
                  :key="item.value"
                  :label="item.title"
                  :value="item.value"
                />
              </el-select>
              <div v-else style="margin-left: 5px">
                {{ form.depotCodeAndName }}
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item
              :label="$t('locationLang.depotRegion')"
              prop="regionId"
            >
              <el-select
                v-model="form.regionId"
                :placeholder="$t('pleaseSelect')"
                :disabled="!form.depotId"
                clearable
                style="width: 400px"
              >
                <el-option
                  v-for="item in depotRegionOptionList"
                  :key="item.value"
                  :label="item.title"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item
              :label="$t('locationLang.locationType')"
              prop="locationTypeId"
            >
              <el-select
                v-model="form.locationTypeId"
                :placeholder="$t('pleaseSelect')"
                :disabled="!form.depotId"
                clearable
                style="width: 400px"
              >
                <el-option
                  v-for="item in depotLocationTypeOptionList"
                  :key="item.value"
                  :label="item.title"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item
              :label="$t('locationLang.locationCode')"
              prop="locationCode"
            >
              <el-input
                v-model="form.locationCode"
                :placeholder="$t('pleaseEnter')"
                maxlength="50"
                show-word-limit
                clearable
                style="width: 400px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item :label="$t('locationLang.pickType')" prop="pickType">
              <el-select
                v-model="form.pickType"
                :placeholder="$t('pleaseSelect')"
                clearable
                style="width: 400px"
              >
                <el-option
                  v-for="item in locationPickTypeOptionList"
                  :key="item.value"
                  :label="$t('locationLang.' + item.title)"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item :label="$t('locationLang.pickSort')" prop="pickSort">
              <el-input-number
                v-model="form.pickSort"
                :placeholder="
                  $t('locationLang.theLargerNumbersTheMoreBackward')
                "
                :min="-99999"
                :max="99999"
                :controls="false"
                style="width: 400px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item :label="$t('remark')" prop="remark">
              <el-input
                v-model="form.remark"
                type="textarea"
                :rows="3"
                :placeholder="$t('pleaseEnter')"
                maxlength="100"
                show-word-limit
                clearable
                style="width: 400px"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="close">{{ $t("cancel") }}</el-button>
        <el-button type="primary" :loading="submitLoading" @click="submit">{{
          $t("submit")
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { locationPickTypeDict, depotStatusDict } from '@/utils/dictData'
import { getDictOptionList, getTitleByValue } from '@/utils/dictUtils'
import {
  getDepotLocationInfo,
  addDepotLocation,
  modifyDepotLocation
} from '@/api/business/depotManage/location'
import { getDepotList } from '@/api/business/depotManage/depot'
import { getDepotLocationTypeList } from '@/api/business/depotManage/locationType'
import { getDepotRegionList } from '@/api/business/depotManage/partition'
export default {
  name: 'LocationInfo',
  props: {
    value: {
      type: Number,
      default: undefined
    },
    visible: {
      type: Boolean,
      default: undefined
    },
    operation: {
      type: Number,
      default: 0 // 0 see 1 add 2 edit
    },
    title: {
      type: String,
      default: undefined
    },
    width: {
      type: String,
      default: '600px'
    }
  },
  data() {
    return {
      depotOptionList: [],
      depotLocationTypeOptionList: [],
      depotRegionOptionList: [],
      locationPickTypeOptionList: getDictOptionList(locationPickTypeDict),
      depotStatusOptionList: getDictOptionList(depotStatusDict),
      getTitleByValue: getTitleByValue,

      submitLoading: false,

      form: {},
      rules: {
        depotId: [
          { type: 'number', required: true, message: this.$t('notNull') }
        ],
        regionId: [
          { type: 'number', required: true, message: this.$t('notNull') }
        ],
        locationTypeId: [
          { type: 'number', required: true, message: this.$t('notNull') }
        ],
        locationCode: [{ required: true, message: this.$t('notNull') }],
        pickType: [
          { type: 'number', required: true, message: this.$t('notNull') }
        ],
        pickSort: [
          { type: 'number', required: true, message: this.$t('notNull') }
        ]
      }
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal != null && newVal !== undefined && newVal !== oldVal) {
          this.getData()
        }
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    init() {
      this.getDepotOptionList()
      this.getDepotLocationTypeOptionList()
      this.getDepotRegionOptionList()
    },
    async getDepotOptionList() {
      const res = await getDepotList()
      if (!res) return
      this.depotOptionList = res.data || []
    },
    async getDepotLocationTypeOptionList() {
      const res = await getDepotLocationTypeList({
        depotId: this.form.depotId
      })
      if (!res) return
      this.depotLocationTypeOptionList = res.data || []
    },
    async getDepotRegionOptionList() {
      const res = await getDepotRegionList({
        depotId: this.form.depotId
      })
      if (!res) return
      this.depotRegionOptionList = res.data || []
    },
    depotChange() {
      this.$set(this.form, 'regionId', undefined)
      this.$set(this.form, 'locationTypeId', undefined)
      this.getDepotRegionOptionList()
      this.getDepotLocationTypeOptionList()
    },
    async getData() {
      if (!this.value || this.operation === 1) {
        this.getDepotOptionList()
        return
      }
      const res = await getDepotLocationInfo({
        locationId: this.value
      })
      if (!res) return
      this.form = res.data || {}
      this.init()
    },
    reset() {
      this.form = {
        locationId: undefined,
        locationStatus: undefined,
        depotId: undefined,
        depotCodeAndName: undefined,
        regionId: undefined,
        locationTypeId: undefined,
        locationCode: undefined,
        pickType: undefined,
        pickSort: undefined,
        remark: undefined
      }
      this.$refs['form'].resetFields()
    },
    async submit() {
      const valid = await this.$refs['form'].validate().catch((err) => err)
      if (valid !== true) return
      this.submitLoading = true
      if (this.operation === 1) {
        const res = await addDepotLocation({
          ...this.form,
          locationId: undefined
        }).finally(() => {
          this.submitLoading = false
        })
        if (!res) return
      } else if (this.operation === 2) {
        const res = await modifyDepotLocation({
          ...this.form
        }).finally(() => {
          this.submitLoading = false
        })
        if (!res) return
      } else {
        return
      }
      this.$message({
        message: this.$t('handleSuccess'),
        type: 'success'
      })
      this.close()
    },
    close() {
      this.$emit('close')
    },
    closed() {
      this.reset()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
</style>
